import React, {Component} from 'react'
import {pageDidMount} from '$common/routerFn'
import {Card, Button, Popconfirm, Table, Input, Row, Col, Alert, message,Popover} from 'antd'
import Model from '$store/admin/user'
import { observer } from 'mobx-react'
import propTypes from 'prop-types';
import {IS_OK} from '$config/admin/state_code'
import { easyMessage } from '$common/admin/utils';

const {Column} = Table;
const Search = Input.Search;

class UserSearchBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    }
  }

  static propTypes = {
    onClick: propTypes.func
  };
  handleInputChange = (e) => {
    this.setState({
      value: e.target.value
    })
  };
  handleSearchClick = () => {
    this.props.onClick(this.state.value);
  };

  render() {
    const {value} = this.state;
    return (
      <div className="c-tableBody-tableListOperator">
        <Row>
          <Col span={9}>
            <Row className="tableListOperator-row">
              <Col className="tableListOperator-row-title" span={4}>
                搜索用户:
              </Col>
              <Col span={14}>
                <Search value={value} onChange={this.handleInputChange} placeholder="请输入关键词"/>
              </Col>
              <Col span={4} offset={1}>
                <Button onClick={this.handleSearchClick} type="primary" icon="plus">查找</Button>
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    );
  }
}

@observer
class UserManager extends Component {
  constructor(props) {
    super(props);
    this.store = new Model();
  }

  _getUserList = async (page, filter) => {
    this.store.toggleLoading();
    let Rs = await this.store.getUserList(page, filter);
    if (Rs.data.error_code !== IS_OK) {
      await this.store.getUserList(page);
    }
    this.store.toggleLoading();
    return Rs
  };

  handleRefresh = async (page) => {
    this._getUserList(1).then(Rs=>{
      easyMessage(Rs.data.error_code,Rs.data.msg);
    })
  };

  handlePageChange = (page) => {
    this._getUserList(page).then(Rs=>{
      easyMessage(Rs.data.error_code,Rs.data.msg);
    });
  };

  handlePageSizeChange = (page, size) => {
    this.store.setPageSize(size);
    this._getUserList(1).then(Rs=>{
      easyMessage(Rs.data.error_code,Rs.data.msg);
    })
  };

  handleSearchText = (text) => {
    if(!text) return this._getUserList(1);
    this._getUserList(1, {
      name: text
    }).then(Rs=>{
      easyMessage(Rs.data.error_code,Rs.data.msg,()=>this.store.setListTotal(1));
    })
  };

  handleDelUser = async (id)=>{
    let Rs = await this.store.delUser(id);
    easyMessage(Rs.data.error_code,Rs.data.msg,()=>this._getUserList());
  };

  handlePassWordInputChange = (e,id)=>{
    this.store.editItemInputValue(e.target.value,id);
    this.forceUpdate();
  };

  handleEditPassWord =async (val,id)=>{
    let Rs = await  this.store.eidtPassWord({id,password:val});
    easyMessage(Rs.data.error_code,Rs.data.msg);
  };

  @pageDidMount()
  componentDidMount() {
    this._getUserList().then();
  }

  render() {
    let {tableData, loading, listTotal, tablePage, table_page_size} = this.store;
    let pagenationConfig = {
      current: tablePage ,
      total: listTotal,
      pageSize: table_page_size,
      onChange: this.handlePageChange,
      showSizeChanger: true,
      onShowSizeChange: this.handlePageSizeChange,
      pageSizeOptions: ['5', '8', '10', '15']
    };

    return (
      <div className="c-page user-page">
        <Card title={false}>
          <div className="c-tableBody">

            <UserSearchBox onClick={this.handleSearchText}/>

            <div className="c-tableBody-alert">
              <Alert showIcon message="请勿随意删除修改用户 如有需求请联系管理员" type="warning"/>
            </div>

            <div className="c-tableBody-opt">
              <Button type="primary" onClick={this.handleRefresh} icon="undo">刷新</Button>
            </div>

            <Table size="small" style={{minHeight: 500}} loading={loading} dataSource={tableData}
                   pagination={pagenationConfig}>
              <Column title="id" key="id" dataIndex="id"/>
              <Column title="姓名" key="name" dataIndex="name"/>
              <Column title="店铺名称" key="order" dataIndex="order"/>
              <Column title="操作" key="operation" render={
                (record) => {
                  const { inputValue,id } = record;
                  return <Button.Group>
                    <Popover title="修改密码" trigger="click" content={<div className="user-edit-password">
                      <input value={ inputValue } onChange={e => this.handlePassWordInputChange(e,id)} className="password-input" type="text"/> <Button onClick={e => this.handleEditPassWord(inputValue,id)} className="password-button" size="small">确定</Button>
                    </div>}>
                      <Button icon="key"/>
                    </Popover>
                    <Popconfirm title="是否删除?" okText="是" cancelText="否" onConfirm={e => this.handleDelUser(record.id)}>
                      <Button icon="delete"/>
                    </Popconfirm>
                  </Button.Group>
                }
              }/>
            </Table>
            <div className="c-tableBody-tableFooter">

            </div>
          </div>
        </Card>
      </div>
    );
  }
}

export default UserManager
